<template>
  <div>
    <el-dialog
      :title="name"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      width="1200px">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="物料科室" >
          <el-select v-model="queryParams.value" placeholder="请选择">
            <el-option
              v-for="item in wlksList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物料信息" >
          <el-input
            v-model="queryParams.code"
            placeholder="请输入物料信息"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="计划月份" >
          <el-date-picker
            v-model="queryParams.value2"
            type="month"
            placeholder="选择月">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="计划类型" >
          <el-select v-model="queryParams.value" placeholder="请选择">
            <el-option
              v-for="item in optionsLX"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资金来源" >
          <el-select v-model="queryParams.value" placeholder="请选择">
            <el-option
              v-for="item in zjlyList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" >
          <el-checkbox v-model="queryParams.checked" >历史需求</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table  :data="chanpinList" stripe>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="科室" property="code"  ></el-table-column>
        <el-table-column align="center" label="物料分类"   property="name" :show-overflow-tooltip="true"  ></el-table-column>
        <el-table-column align="center" label="物料编码" property="danwei" :show-overflow-tooltip="true"  ></el-table-column>
        <el-table-column align="center" label="物料名称"  property="fenlei"  ></el-table-column>
        <el-table-column align="center" label="物料规格"  property="fenlei"  ></el-table-column>
        <el-table-column align="center" label="物料型号"  property="fenlei"  ></el-table-column>
        <el-table-column align="center" label="单位"  property="fenlei"  ></el-table-column>
        <el-table-column align="center" label="计划价"  property="jihuajia"  ></el-table-column>
        <el-table-column align="center" label="需求数"  property="xuqiushu"  ></el-table-column>
        <el-table-column align="center" label="用途"  property="fenlei"  ></el-table-column>
        <el-table-column align="center" label="备注"  property="fenlei"  ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="wlAdd(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 15px"
        :total="5">
      </el-pagination>
      <el-divider></el-divider>
      <el-form :model="queryParamsb" ref="queryFormb" :inline="true">
        <el-form-item label="已添加物料" >

        </el-form-item>
        <el-form-item label="需求计划名" >
          <el-input
            v-model="queryParamsb.code"
            placeholder="请输入需求计划名"
            clearable
            size="small"
          />
        </el-form-item>
      </el-form>
      <el-table  :data="addList" stripe  max-height="250">
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="科室" property="code"  ></el-table-column>
        <el-table-column align="center" label="物料分类"   property="name" :show-overflow-tooltip="true"  ></el-table-column>
        <el-table-column align="center" label="物料编码" property="danwei" :show-overflow-tooltip="true"  ></el-table-column>
        <el-table-column align="center" label="物料名称"  property="fenlei"  ></el-table-column>
        <el-table-column align="center" label="物料规格"  property="fenlei"  ></el-table-column>
        <el-table-column align="center" label="物料型号"  property="fenlei"  ></el-table-column>
        <el-table-column align="center" label="单位"  property="fenlei"  ></el-table-column>
        <el-table-column align="center" label="计划价"  property="jihuajia"  ></el-table-column>
        <el-table-column align="center" label="需求数"  property="xuqiushu"  >
          <template slot-scope="scope">
            <el-input v-model="scope.row.xuqiushu" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用途"  property="fenlei"  ></el-table-column>
        <el-table-column align="center" label="备注"  property="fenlei"  ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>



      <span slot="footer" class="dialog-footer">
        <el-button type="primary"  size="mini" @click="determine">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { treeselect } from "@/api/system/dept";
  export default {
    props: ['addProductData'],
    name: "Role",
    data() {
      return {
        queryParamsb: {},
        name:'新增需求计划',
        //物料科室数据
        wlksList:[
          {value:'1',label:'科室1'},
          {value:'2',label:'科室2'},
        ],
        //资金来源
        zjlyList:[
          {value:'1',label:'来源1'},
          {value:'2',label:'来源2'},
        ],


        loading:false,
        dialogTableVisible:true,
        //产品查询数据
        queryParams:{
          code:'',
          name:'',
          value:'',
        },
        //类型数据
        optionsLX:[
          {value:'1',label:'月度计划'},
          {value:'2',label:'临时计划'},
        ],
        newxuanz:[],//当前选中的
        deptOptions:[],//树形图数据
        defaultProps: {
          children: "children",
          label: "label"
        },
        //产品列表数据
        chanpinList:[
          {id:'1',jihuajia:'1.2',xuqiushu:'20',code:'HC2018121300111',name:'运输车',danwei:'辆',fenlei:'车辆'},
          {id:'2',jihuajia:'1.2',xuqiushu:'20',code:'HC2018121300112',name:'运输车',danwei:'辆',fenlei:'车辆'},
          {id:'3',jihuajia:'1.2',xuqiushu:'20',code:'HC2018121300113',name:'运输车',danwei:'辆',fenlei:'车辆'},
          {id:'4',jihuajia:'1.2',xuqiushu:'20',code:'HC2018121300114',name:'运输车',danwei:'辆',fenlei:'车辆'},
          {id:'5',jihuajia:'1.2',xuqiushu:'20',code:'HC2018121300113',name:'运输车',danwei:'辆',fenlei:'车辆'},
        ],
        //已添加
        addList:[]

      };
    },
    components:{

    },
    watch: {
      dialogTableVisible: function () {
        this.dialogTableVisible = true;//始终让他为true;
        this.cancel();//隐藏
      },
    },
    created() {
      console.log('接受',this.addProductData)
      this.name = this.addProductData.title
    },
    methods: {
      handleDelete:function(row){
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.shanchu(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      shanchu:function(row){
        console.log(row)
        this.addList.splice(row,1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      },
      //物料添加
      wlAdd:function(row){
        console.log('物料添加',row)
        debugger
        if(this.addList.length!=0){
          //判断不可用重复添加
          for(var i=0;i<this.addList.length;i++){
            if(this.addList[i].id==row.id){
              this.$message({
                type: 'info',
                message: '已经存在'
              });
              return
            }
          }
          this.addList.push(row)
        }else {
          this.addList.push(row)
        }
      },
      //确定
      determine:function(){
        this.$emit('addProductBack',this.newxuanz)//将submitModel的值传给父组件
      },
      //隐藏
      cancel:function(){
        this.determine()

      },
      //产品表格监听
      chanpinonChange(val) {
        console.log(val)
        this.newxuanz = val
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

    }
  };
</script>
<style >





</style>
